<template>
  <div class="shangpin">
    <van-nav-bar left-text="OMINI官方旗舰店"
                 id="tit" />
    <van-row>
      <div class='box8'>
        <van-col span="8"
                 class='zi'>关注数量 2333</van-col>
        <van-col span="8"
                 class='zi'>信用值 100</van-col>
      </div>
    </van-row>
    <div>
      <van-tabs v-model="active">
        <van-search v-model="value"
                    placeholder="搜索" />
        <van-tab title="首页">
          <!--轮播图-->

          <van-swipe :autoplay="3000"
                     :height="150">
            <van-swipe-item v-for="banner in banners"
                            :key="banner.id">
              <img v-lazy="banner.image"
                   :style="{width: '100%', height: '100%'}" />
            </van-swipe-item>
          </van-swipe>
          <div class="box2">
            <van-card desc="预告 100 分 ss 秒 后开始"
                      title="当季新品  潮流搭配"
                      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" />
            <van-button plain
                        hairline
                        type="info"
                        class="but1">开播提醒</van-button>
          </div>
        </van-tab>
        <van-nav-bar class='tit3'
                     title="优惠券" />
        <van-nav-bar class='tit3'
                     title="COUPON" />
        <div class='box10'>
          <van-grid :gutter="40">
            <van-grid-item v-for="value in 3"
                           :key="value"
                           icon="photo-o"
                           text="文字"
                           class='box4' />
          </van-grid>
        </div>

        <van-nav-bar class='tit3'
                     title="分类" />
        <van-nav-bar class='tit3'
                     title="CLASSFICATION" />
        <van-grid :gutter="40">
          <van-grid-item v-for="value in 4"
                         :key="value"
                         icon="photo-o"
                         text="文字"
                         class='box5' />
        </van-grid>
        <div class='box6'>
          <van-nav-bar class='tit3'
                       title="店铺推荐" />
          <van-nav-bar class='tit3'
                       title="RECOMMENDATION" />

          <!--推荐商品-->
          <van-list v-model="loading"
                    :finished="isEnd"
                    finished-text="没有更多了"
                    @load="onLoad">
            <van-card class='box11'
                      v-for="item in products"
                      :key="item.id"
                      :price="item.price | money"
                      :origin-price="item.originPrice | money"
                      :thumb="item.image"
                      :title="item.title"
                      @click="jumpToDetail(item.id)">
            </van-card>
          </van-list>
          <!-- <van-list v-model="loading"
                    :finished="isEnd"
                    finished-text="没有更多了"
                    @load="onLoad">
            <van-card v-for="item in products"
                      :key="item.id"
                      :price="item.price | money"
                      :origin-price="item.originPrice | money"
                      :thumb="item.image"
                      @click="jumpToDetail(item.id)"> -->
          <!-- 自定义标题插槽，显示一行标题文本 -->
          <!-- <template #title>
                <div class="van-ellipsis">{{ item.title }}</div>
              </template> -->
          <!-- 自定义数量插槽，显示月销量 -->
          <!-- <template v-slot:num>
                <span style="margin-right: 6px">月销量:{{ item.saleNum }}</span>
                <van-icon name="cart-circle-o"
                          color="#f00"
                          size="18"
                          @click.stop="handleAddToCart(item)" />
              </template> -->
          <!-- 自定义描述下方的标签，显示优惠券、包邮 -->
          <!-- <template #tags>
                <van-tag plain
                         type="primary"
                         color="#f00"
                         v-if="item.couponValue"
                         style="margin-right: 6px;">
                  {{ item.couponValue }}
                </van-tag>
                <van-tag plain
                         type="primary"
                         color="#f00"
                         v-if="item.isFreePostage">
                  包邮
                </van-tag>
              </template>
            </van-card>
          </van-list> -->
        </div>

        <van-tab title="商品">商品</van-tab>

      </van-tabs>
    </div>
  </div>
</template>

<script>
import { getBanners, getHots } from '@/api/shangpin'

export default {
  name: 'Shangpin',
  data() {
    return {
      banners: [], // 轮播图数组
      products: [], // 推荐商品
      isEnd: false, // 是否所有推荐商品已查完
      nextIndex: 0, // 下一页推荐商品查询起始索引
      loading: true, // 商品列表中是否正在加载列表数据
      active: 2,
      value: '',
    }
  },
  async created() { // 实例创建后，立即发送网络请求
    // console.log('created...')
    // console.log('products')
    try {
      // const result = await Promise.allSettled([
      // 同时发送两个网络请求，Promise.all() 返回一个 Promise 对象
      // 当返回的 Promise 对象状态变为 fulfilled 时，成功请求的数据
      // 会返回到解构的变量中
      // const result = await Promise.all([
      // const [obj1, obj2] = await Promise.all([
      // const [{list}, {list}] = await Promise.all([
      const [
        // { list: categories },
        { list: banners },
        { list: products, isEnd, nextIndex },
      ] = await Promise.all([
        getHots(),
        getBanners(),
      ])
      // 修改 data 数据，以响应式渲染
      // this.categories = categories
      // console.log(banners)
      this.banners = banners
      this.products = products
      this.nextIndex = nextIndex
      this.isEnd = isEnd
      this.loading = false
    } catch (error) {
      console.error('有错误：', error)
    }

    // const { list } = await getCategories()
    const result = await getBanners()

    // // console.log('分类：', list)
    // this.categories = list
    console.log(result)
    this.banners = result.list
  },
  // mounted() {
  //   console.log('mounted...')
  // },
  // updated() {
  //   console.log('updated...')
  // },
  methods: {
    /**
     * 触底加载更多商品
     */
    async onLoad() {
      // 异步更新数据
      const { list, nextIndex, isEnd } = await getHots(this.nextIndex)
      this.products = [
        ...this.products, // 浅拷贝，将原有 products 数组中的元素复制到新数组中
        ...list,
      ]
      this.nextIndex = nextIndex
      this.isEnd = isEnd
      this.loading = false
    },
    /**
     * 跳转到详情页面
     */
    // jumpToDetail(id) {
    //   this.$router.push('/detail/' + id)
    // },
    /**
     * 处理添加到购物车
     */
    // handleAddToCart(prod) {
    // 构建当前选购的商品对象
    // const currentProduct = {
    //   id: prod.id,
    //   image: prod.image,
    //   title: prod.title,
    //   price: prod.price,
    // }
    // 加入购物车，更新 vuex store 中的状态数据
    // 选购中不能直接调用到 store 中定义的 action 方法
    // 而是需要调用 store.dispatch(action) 来分发 action
    // this.$store.dispatch('cart/addToCartAsync', currentProduct)
    // 提示
    // this.$toast({
    //   type: 'success',
    //   message: '加入成功',
    // })
    // },
  },
}

</script>
<style lang="less" scoped>
/deep/.van-nav-bar__text {
  color: #333333;
  font-size: 16px;
}
/deep/.zi {
  font-size: 14px;
  padding-right: 10px;
  color: #fffffd;
}
/deep/.van-search {
  width: 200px;
  border-radius: 10px;
}
/deep/.van-search__content {
  border-radius: 22px;
}
/deep/.van-tab--active {
  width: 100px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 320px;
  text-align: center;
  background-color: #39a9ed;
}
/deep/.van-card__desc {
  margin-top: 32px;
}

/deep/.but1 {
  position: relative;
  margin-top: 80px;
  border-radius: 100px;
  width: 200px;
  border: #d3b396;
  color: #d3b396;
}
/deep/.van-button--plain.van-button--info {
  color: #d3b396;
}
/deep/.box2 {
  width: 1800px;
  height: 250px;
  display: flex;
}
/deep/.van-nav-bar__content {
  height: 27px;
}
/deep/.box4 {
  // margin-right: 20px;
  margin-left: 30px;
  width: 50px;
}
/deep/.box5 {
  margin-right: 20px;
  margin-left: 80px;
  width: 120px;
  margin-right: 20px;
  margin-left: 80px;
  width: 100px;
}
// /deep/.box5 {
//   margin-right: 20px;
//   margin-left: 240px;
//   width: 100px;
// }
/deep/.box6 {
  height: 3000px;
  width: 1800px;

  background: #c1ab96;
}
.box8 {
  background: #eae9e5;
}
/deep/.van-tab--active {
  background: #eae9e5;
}
/deep/.van-tab {
  background: #eae9e5;
  width: 300px;
}
.van-grid {
  display: flex;
  margin-left: 20px;
  margin-bottom: 20px;
}
.box5 {
  display: flex;
}
/deep/.van-card {
  height: 120px;
  background: #ffffff;
  padding: 30px 22px;
}
</style>
